<template>
  <div class="app-container">
    <div class="header">
      <div class="block">
        <el-cascader
          :props="props"
          placeholder="请选择分类"
          @change="handleChange"
        />
      </div>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="70">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>
      <el-table-column label="学年学期" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学院" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.college }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专业" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.major }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年级" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.grade }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.class }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总分" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.end_source }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评价">
        <template slot-scope="scope">
          {{ scope.row.end_grade }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="200">
        <template slot-scope="{row}">
          <router-link :to="{path:'./detail',query: {row}}">
            <el-button type="text" size="small">查看</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as measure from '@/api/measure'
const nameToValue = {
  1: 'time',
  2: 'term',
  3: 'college',
  4: 'grade',
  5: 'major',
  6: 'class'
}
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          // console.log('当前节点', node)
          setTimeout(() => {
            const send_data = {
              time: node.path ? node.path[0] : null,
              term: node.path ? node.path[1] : null,
              college: node.path ? node.path[2] : null,
              grade: node.path ? node.path[3] : null,
              major: node.path ? node.path[4] : null
            }
            const level = node.path ? node.path.length + 1 : 1
            // console.log('发送数据', send_data)
            measure.option(level, send_data).then(response => {
              const data = response.data.map(item => ({
                value: item[nameToValue[level]],
                leaf: level >= 6,
                label: item[nameToValue[level]]
              }))
              resolve(data)
              // console.log('获取到查询条件', data)
            })
          }, 1000)
        }
      },
      value: [],
      list: null,
      listLoading: false
    }
  },
  created() {
  },
  methods: {
    fetchData(value) {
      this.listLoading = true
      measure.list(value).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    handleChange(value) {
      console.log('选择的条件', value)
      const sdata = {
        'time': value[0],
        'term': value[1],
        'college': value[2],
        'grade': value[3],
        'major': value[4],
        'class': value[5]
      }
      this.fetchData(sdata)
    }
  }
}
</script>
<style scoped>
.header{
  margin-bottom: 10px;
}
</style>
